CSS grid

table:grid-by-num

1 2 3 4 5

1 + ---- + ---- + ---- + ---- + -5

| 1, 1 | 1, 2 | 1, 3 | 1, 4 |

2 + ---- + ---- + ---- + ---- + -4

| 2, 1 | 2, 2 | 2, 3 | 2, 4 |

3 + ---- + ---- + ---- + ---- + -3

| 3, 1 | 3, 2 | 3, 3 | 3, 4 |

4 + ---- + ---- + ---- + ---- + -2

| 4, 1 | 4, 2 | 4, 3 | 4, 4 |

5 + ---- + ---- + ---- + ---- + -1

-5 -4 -3 -2 -1

線名を指定しなかった場合、左上からの連番が線名になる

table:grid-by-area

1 2 3 4 5

1 + - + - + - + - + -5

| a | a | b | b |

2 + - + - + - + - + -4

| a | a | b | b |

3 + - + - + - + - + -3

| a | a | c | c |

4 + - + - + - + - + -2

| a | a | c | c |

5 + - + - + - + - + -1

-5 -4 -3 -2 -1

area の start と end を area-start area-end で取れる

grid-column

grid-row

grid-(column|row)-start

省略時(auto)

1

線名 (番目)

左から数えて n 番目の線名を選択

番目省略時は1

span 線名 (番目)

end 側から数えて n 番目の線名を選択

番目省略時は1

grid-(column|row)-end

省略時(auto)

1

線名 (番目)

左から数えて n 番目の線名を選択

番目省略時は1

span 線名 (数値)

start 側から数えて n 番目の線名を選択

番目省略時は1